<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions">
    <h:head>
        <title>Reportable Data</title>
    </h:head>
    <h:body>
        <f:view contracts="main">
            <ui:composition template="/template.xhtml">
                <ui:define name="content">
                    <h:form prependId="false" id="form">

                        <div class="noprint">
                            <p:tabView effect="slide" effectDuration="slow" id="tabs" value="#{reportsBean.allTypes()}" var="type" dynamic="true" cache="false">

                                <p:tab  title="#{type}" >

                                    <p:commandButton value="Import From Project" oncomplete="PF('importer').show();"/>

                                    <h:panelGroup rendered="#{type.general}">
                                        <ui:include src="ReportableItems/generalReport.xhtml" >
                                            <ui:param name="reportType" value="#{type}"/>
                                        </ui:include>
                                    </h:panelGroup>
                                    <h:panelGroup rendered="#{type.toString()=='MOBILIZATION'}">
                                        <ui:include src="ReportableItems/mobilization.xhtml" >

                                        </ui:include>
                                    </h:panelGroup>
                                    <h:panelGroup rendered="#{type.toString()=='ALUMINUM'}">
                                        <ui:include src="ReportableItems/aluminium.xhtml" >

                                        </ui:include>
                                    </h:panelGroup>
                                    <h:panelGroup rendered="#{type.toString()=='STEEL_DOORS'}">
                                        <ui:include src="ReportableItems/steelDoors.xhtml" >

                                        </ui:include>
                                    </h:panelGroup>
                                    <h:panelGroup rendered="#{type.toString()=='SITE_EXPENCES'}">
                                        <ui:include src="ReportableItems/expenses.xhtml" >

                                        </ui:include>
                                    </h:panelGroup>

                                    <h:panelGroup rendered="#{type.toString()=='CARPENTER'}">
                                        <ui:include src="ReportableItems/Carpenter.xhtml" >

                                        </ui:include>
                                    </h:panelGroup>
                                </p:tab>

                            </p:tabView>
                            <p:dialog widgetVar="comparetor" header="Report generator" dynamic="true" position="top" width="407">
                                <p:wizard id="wizard">
                                    <p:tab id='otherProject' title="Other Project">
                                        <p:panel header="Project to compare with">
                                            <p:selectOneMenu id="projects" value="#{reportsController.p2}"  converter="projectConverter">
                                                <f:selectItems  var="resItem" value="#{projectsBean.getOtherProjects(reportsController.p1)}"  itemLabel="#{resItem.name}" itemValue="#{resItem}"/>
                                            </p:selectOneMenu>
                                        </p:panel>
                                    </p:tab>
                                    <p:tab id='reportItems' title="Report Items">
                                        <p:panel header="Select Report Items">
                                            <p:tree  animate="true" style="height: 200px; width: 320px; overflow: auto" id="sectionsTree" value="#{reportsController.codesTree()}" cache="true" dynamic="true" selection="#{reportsController.selectedNodes}"  var="resTree" widgetVar="myTree" selectionMode="checkbox"  >
                                                <p:ajax event="select" listener="#{reportsController.onNodeSelect}" /> 
                                                <p:ajax event="unselect" listener="#{reportsController.onNodeUnSelect}" /> 
                                                <p:treeNode icon="ui-icon-image" >
                                                    <h:outputText value="#{resTree.code}"/>
                                                </p:treeNode>

                                            </p:tree>

                                        </p:panel>
                                    </p:tab>
                                    <p:tab id='summaryTab' title="Summary">
                                        <p:panel header="Summary">
                                            <p:panelGrid columns="1">
                                                Other project:#{reportsController.p2.name}
                                                NO. of Items:#{fn:length(reportsController.selectedNodes)}
                                                <f:facet name="footer">
                                                    <p:commandButton value="Show Report" oncomplete="PF('reporter').show();" process="wizard" update="reportTable"/>
                                                    <p:commandButton value="Show Graphs" oncomplete="PF('graphs').show();" process="wizard" update="graphs"/>
                                                </f:facet>
                                            </p:panelGrid>
                                        </p:panel>
                                    </p:tab>
                                </p:wizard>
                            </p:dialog>
                            <p:dialog widgetVar="importer" header="Import Tender Data" dynamic="true" style="width: 550px;height: 300px">
                                <p:fragment autoUpdate="true">
                                    <p:outputPanel id="projectsPanel">

                                        <p:panel header="Project to compare with">
                                            <p:selectOneMenu id="allprojects" value="#{projectsBean.importFromProject}"  converter="projectConverter">
                                                <f:selectItems  var="resItem" value="#{projectsBean.getOtherProjects(reportsController.p1)}"  itemLabel="#{resItem.name}" itemValue="#{resItem}"/>
                                            </p:selectOneMenu>
                                        </p:panel>

                                    </p:outputPanel>
                                    <p:commandButton value="Import" oncomplete="PF('importer').hide();" process="@(#projectsPanel)" update="tabs" action="#{projectsBean.importTender()}"/>
                                </p:fragment>
                            </p:dialog>
                            <p:dialog widgetVar="reporter" dynamic="true" header="Report" style="width: 550px;height: 300px">

                                <p:dataTable var="report" value="#{reportsController.reportData}" id="reportTable" >
                                    <p:columnGroup type="header">
                                        <p:row>
                                            <p:column rowspan="3" headerText="Item" />
                                            <p:column colspan="3" headerText="Item Statistics" />
                                        </p:row>
                                        <p:row>

                                            <p:column colspan="2" headerText="Total Value" />
                                        </p:row>
                                        <p:row>

                                            <p:column headerText="#{reportsController.p1.name}" />
                                            <p:column headerText="#{reportsController.p2.name}" />
                                        </p:row>
                                    </p:columnGroup>
                                    <p:column>
                                        #{report.code}
                                    </p:column>
                                    <p:column>
                                        #{report.p1TotalValue}$
                                    </p:column>
                                    <p:column>
                                        #{report.p2TotalValue}$
                                    </p:column>
                                    <p:columnGroup type="footer">
                                        <p:row>
                                            <p:column  style="text-align:right" footerText="Totals:"/>
                                            <p:column footerText="#{reportsController.total1}$" />
                                            <p:column footerText="#{reportsController.total2}$" />
                                        </p:row>
                                    </p:columnGroup>
                                </p:dataTable>
                                <p:commandButton value="Print" type="button" icon="ui-icon-print" rendered="#{login.current.department.name eq 'Admin'}">
                                    <p:printer target="reportTable" />
                                </p:commandButton>
                            </p:dialog>
                            <p:dialog widgetVar="graphs" dynamic="true" header="Graphs" width="800" height="550" position="top">
                                <p:outputPanel id="graphs">
                                    <p:panel header="Comparison">
                                        <p:barChart value="#{reportsController.barModel}" legendPosition="ne"  barMargin="10" breakOnNull="true" barPadding="10" animate="true" />
                                    </p:panel>
                                    <p:panel header="#{reportsController.p1.name} Distribution">
                                        <p:pieChart value="#{reportsController.model1}" legendPosition="w" showDataLabels="true" />
                                    </p:panel>
                                    <p:panel header="#{reportsController.p2.name} Distribution">
                                        <p:pieChart value="#{reportsController.model2}" legendPosition="w" showDataLabels="true" />
                                    </p:panel>
                                </p:outputPanel>
                                  
                            </p:dialog>
                        </div>
                        <div class="print">
                            This application is intended for online use only. If you want to print a part of it contact your administrator.
                        </div>
                    </h:form>
                </ui:define>

            </ui:composition>
        </f:view>
    </h:body>
</html>

